import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// State
const state = {
    count: 0,
    todos: [
        { id: 1, text: '...', done: true },
        { id: 2, text: '...', done: false }
    ]
}

// Getters
const getters = {
    // 查找todo数组中id符合条件的对象
    // 调用方式：store.getters.getTodoById(2)
    getToDoById: (state) => {
        return (id) => {
            return state.todos.find(todo => todo.id === id)
        }
    },
    doneToDos: (state) => {
        return state.todos.filter(todo => todo.done)
    },
    // Getter 也可以接受其他 getter 作为第二个参数
    doneTodosCount: (state, g) => {
        return g.doneToDos.length
    }
}

// Mutations
// 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
// 调用方法：store.commit('add', {})
const mutations = {
    add: (state, num) => {
        state.count += num;
    }
}

// Actions
// Action 提交的是 mutation，而不是直接变更状态
// Action 可以包含任意异步操作
// 调用方法：store.dispath('add', {})
const actions = {
    test(content, payload) {
        console.log("payload", payload)
        content.commit('add', payload)
    },
    add(content, payload) {
        const {
            dispatch, commit, state
        } = content

        return new Promise((resolve, reject) => {
            if (state.count > 100) {
                reject()
            }

            dispatch('test', state.count)
            commit('add', payload)

            resolve();
        })
    }
}

// Modules
import moduleA from './a'
import moduleB from './b'

const store = new Vuex.Store({
    state,
    getters,
    mutations,
    actions,
    modules: {
        a: moduleA,
        b: moduleB
    }
})

export default store